<template>
    <div class="inter">
        <loading v-bind:state="state"></loading>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="1"
            infinite-scroll-immediate-check="true"
        >
            <copup-item :item="item" :index="index" v-for="(item, index) in copupData" :key="index"></copup-item>
            <listload :stateLoad="loading"></listload>
            <p v-show="LastData" class="last">敬请期待更多产品</p>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
    import CopupItem from '@/components/spread/CopupItem.vue';
    export default {
        name: `coupon`,
        components: {
            CopupItem
        },
        data() {
            return {
                state: false,
                copupData: [],
                loading: false, // 滑到底部加载
                LoadData: true, // 是否应该调用获取数据方法
                LastData: false // 数据是否加载完没有了
            };
        },
        created() {
            this.loadMore();
        },
        methods: {
            loadMore(type) {
                // 获取数据和上拉加载共用方法
                console.log(this.LoadData);
                if (this.LoadData === true) {
                    // 上拉加载更多
                    this.loading = true;
                    // 封掉查询数据接口
                    this.LoadData = false;
                    setTimeout(() => {
                        this.$Spread.getvoucherUrl().then(res => {
                            // 去掉初始遮罩
                            this.state = false;
                            // 组装数据
                            res.data.map((item, index) => {
                                this.copupData.push(item);
                            });
                            // 对返回数据的数量进行判断，如果小于每页规定的就不要再请求了
                            let DataNum = res.data.length;
                            if (DataNum < 10) {
                                this.LoadData = false;
                                this.loading = false;
                                this.LastData = true;
                                return;
                            }
                            console.log(DataNum);
                            // 查看本地组装后的数据
                            console.log('this.coupon', this.copupData);
                            // 去掉上拉加载动画
                            this.loading = false;
                            //  打开查询数据接口
                            this.LoadData = true;
                        });
                    }, 1000);
                }
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .last {
        text-align: center
    }

    .inter {
        flex-y();

    }
</style>
